<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td {
				background-color: #c9c9c9;
			}
			
			.td1 {
				background-color: white;
			}
			#show{
				width: 300px;
				height: 100px;
				border: 3px dashed orange;
				line-height: 100px;
				font-size: 50px;
				text-align: center;
				display: none;
			}
		</style>
	</head>

	<body>
		<table id="table" width="300px" height="300px" border="1" cellspacing="0" cellpadding="0">
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<div id="show">
			恭喜过关
		</div>
		<script type="text/javascript">
			var tab = document.getElementById("table");
			var tds;
			var num = 3;
			createTable();

			function createTable() {
				tab.innerHTML = "";
				for(var i = 0; i < num; i++) {
					var row = tab.insertRow();
					for(var k = 0; k < num; k++) {
						row.insertCell();
					}
				}
				tds = tab.getElementsByTagName("td");
				for(var i = 0; i < tds.length; i++) {
					tds[i].onclick = function() {
						var rowindex = this.parentNode.rowIndex;
						var cellindex = this.cellIndex;
						for(var i = 0; i < tds.length; i++) {
							if(tds[i].parentNode.rowIndex == rowindex || tds[i].cellIndex == cellindex) {
								if(tds[i].className) {
									tds[i].className = "";
								} else {
									tds[i].className = "td1";
								}
							}
						}
						getFullTdClass();
					};
				}
			}
			
			
			function getFullTdClass() {
				var iscuccess = true;
				for (var i = 0;i<tds.length;i++) {
					if (tds[i].className == "") {
						iscuccess = false;
						break;
					}
				}
				if (iscuccess) {
					document.getElementById("show").style.display="block";
					setTimeout(function  () {
						num++;
						createTable();
						document.getElementById("show").style.display="none";
					},3000)
				}
			}
		</script>
	</body>

</html>